<template>
    <div class="animal-card-box flex-col-center">
        <div class="animal-card-head flex-col-center">
            <YImage
                    :style="{filter:getSurviveStatus}"
                    class="animal-card-head-img"
                    :src="animal.icon" >

            </YImage>
        </div>
        <div class="animal-card-body">
            <div class="animal-card-body-container flex-col-center">
                <div>
                    <span>
                        <svg t="1665762761348" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4921" width="128" height="128"><path d="M199.111111 449.422222v-73.955555l-19.911111 19.911111c-5.688889 5.688889-14.222222 5.688889-19.911111 0L99.555556 334.222222c-5.688889-5.688889-5.688889-14.222222 0-19.911111l59.733333-59.733333c5.688889-5.688889 14.222222-5.688889 19.911111 0l19.911111 19.911111v-73.955556c-25.6-11.377778-58.311111-7.111111-79.644444 14.222223l-59.733334 59.733333c-28.444444 28.444444-28.444444 72.533333 0 100.977778l59.733334 59.733333c21.333333 21.333333 54.044444 27.022222 79.644444 14.222222zM824.888889 200.533333v73.955556l19.911111-19.911111c5.688889-5.688889 14.222222-5.688889 19.911111 0l59.733333 59.733333c5.688889 5.688889 5.688889 14.222222 0 19.911111l-59.733333 59.733334c-5.688889 5.688889-14.222222 5.688889-19.911111 0L824.888889 375.466667v73.955555c25.6 11.377778 58.311111 7.111111 79.644444-14.222222l59.733334-59.733333c28.444444-28.444444 28.444444-72.533333 0-100.977778l-59.733334-59.733333c-21.333333-22.755556-54.044444-27.022222-79.644444-14.222223zM348.444444 598.755556h-85.333333c-11.377778 0-21.333333-9.955556-21.333333-21.333334s9.955556-21.333333 21.333333-21.333333h85.333333c11.377778 0 21.333333 9.955556 21.333334 21.333333s-9.955556 21.333333-21.333334 21.333334zM348.444444 668.444444h-85.333333c-11.377778 0-21.333333-9.955556-21.333333-21.333333s9.955556-21.333333 21.333333-21.333333h85.333333c11.377778 0 21.333333 9.955556 21.333334 21.333333s-9.955556 21.333333-21.333334 21.333333zM760.888889 598.755556h-85.333333c-11.377778 0-21.333333-9.955556-21.333334-21.333334s9.955556-21.333333 21.333334-21.333333h85.333333c11.377778 0 21.333333 9.955556 21.333333 21.333333s-9.955556 21.333333-21.333333 21.333334zM760.888889 668.444444h-85.333333c-11.377778 0-21.333333-9.955556-21.333334-21.333333s9.955556-21.333333 21.333334-21.333333h85.333333c11.377778 0 21.333333 9.955556 21.333333 21.333333s-9.955556 21.333333-21.333333 21.333333z" fill="#404042" p-id="4922"></path><path d="M142.222222 256v440.888889c0 93.866667 76.8 170.666667 170.666667 170.666667h398.222222c93.866667 0 170.666667-76.8 170.666667-170.666667V256c0-55.466667-44.088889-99.555556-99.555556-99.555556H241.777778c-55.466667 0-99.555556 44.088889-99.555556 99.555556z m568.888889 554.666667H312.888889c-62.577778 0-113.777778-51.2-113.777778-113.777778V256c0-24.177778 18.488889-42.666667 42.666667-42.666667h540.444444c24.177778 0 42.666667 18.488889 42.666667 42.666667v440.888889c0 62.577778-51.2 113.777778-113.777778 113.777778z" fill="#404042" p-id="4923"></path><path d="M355.555556 337.066667c-35.555556 0-64 28.444444-64 64s28.444444 64 64 64 64-28.444444 64-64-28.444444-64-64-64z m0 85.333333c-11.377778 0-21.333333-9.955556-21.333334-21.333333s9.955556-21.333333 21.333334-21.333334 21.333333 9.955556 21.333333 21.333334-9.955556 21.333333-21.333333 21.333333zM668.444444 337.066667c-35.555556 0-64 28.444444-64 64s28.444444 64 64 64 64-28.444444 64-64-28.444444-64-64-64z m0 85.333333c-11.377778 0-21.333333-9.955556-21.333333-21.333333s9.955556-21.333333 21.333333-21.333334 21.333333 9.955556 21.333334 21.333334-9.955556 21.333333-21.333334 21.333333zM452.266667 628.622222l22.755555 31.288889c18.488889 25.6 56.888889 25.6 75.377778 0l22.755556-31.288889c22.755556-31.288889 0-73.955556-36.977778-73.955555h-45.511111c-39.822222 0-61.155556 42.666667-38.4 73.955555z m39.822222-31.288889h41.244444c2.844444 0 5.688889 4.266667 4.266667 7.111111l-19.911111 31.288889c-1.422222 2.844444-5.688889 2.844444-7.111111 0l-19.911111-31.288889c-4.266667-2.844444-2.844444-7.111111 1.422222-7.111111z" fill="#404042" p-id="4924"></path></svg>
                    </span>
                    <span >
                        <span style="font-size: 25px">
                              {{animal.nick}}
                        </span>
                        <span v-html="getSex" style="font-size: 18px"></span>
                    </span>
                </div>
                <div>
                    <span> <i class="el-icon-star-off"></i></span>
                    <span>{{animal.introduction}}</span>
                </div>
                <div>
                    <span></span>
                </div>
                <div>
                    <span><i class="el-icon-potato-strips"></i></span>
                    <span>{{animal.birthday}}</span>
                </div>
                <div>
                    <span>
                        <i class="el-icon-location-outline"></i>
                    </span>
                    <span>
                        {{animal.address}}
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import YImage from "@/components/image/YImage";
    export default {
        name: "AnimalCard",
        props:{
            item:{
                require:true,
                type:Object
            }
        },
        components: {YImage},
        data(){


            return{
                animal:{
                    nick:"",
                    sex:0,
                    introduction:"",
                    schoolId:"",
                    birthday:"",
                    icon:"",
                    address:"",
                    adoptStatus:"",
                    sterlizationStatus:0,
                    surviveStatus:0
                }
            }
        },
        methods:{
            testAnimal(){
                this.animal={
                    nick:"焦糖",
                    sex:0,
                    introduction:"贪吃猫,摆烂猫",
                    schoolId:1,
                    birthday:"2020-11-21",
                    icon:"http://www.youlibin.top:8090/image/934453e.jpg.jpg",
                    address:"四川省成都市成都信息工程大学21栋附近",
                    sterlizationStatus:1,
                    adoptStatus:1,
                    surviveStatus:0
                }
            },


        },
        computed:{
          getSurviveStatus(){
              let surviveStatus=this.animal.surviveStatus
              if(surviveStatus===0){
                  return 'grayscale(1)'
              }
              return 'none'
          },
          getSex(){
              let sex=this.animal.sex
              if(sex===0){
                  // 母
                  return '<svg t="1665762916751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1456" width="128" height="128"><path d="M511.843434 512m-446.708971 0a446.708971 446.708971 0 1 0 893.417942 0 446.708971 446.708971 0 1 0-893.417942 0Z" fill="#FFFFFF" p-id="1457"></path><path d="M424.111301 818.825061c-59.328223 0-115.140367-23.107277-157.101038-65.081251-86.620823-86.620823-86.620823-227.581252 0-314.215378 41.960671-41.973974 97.771791-65.081251 157.101038-65.081251 59.355853 0 115.140367 23.12058 157.101037 65.081251 41.960671 41.973974 65.081251 97.771791 65.081251 157.11434s-23.12058 115.140367-65.081251 157.101038-97.745185 65.081251-157.101037 65.081251z m0-360.620268c-36.97103 0-71.733765 14.409175-97.881285 40.543392-53.957913 53.984518-53.957913 141.804656 0 195.775872 26.14752 26.14752 60.910255 40.543392 97.881285 40.543391s71.733765-14.395872 97.881284-40.543391c26.14752-26.14752 40.543392-60.910255 40.543392-97.881285s-14.395872-71.733765-40.543392-97.894587c-26.146497-26.14752-60.909232-40.543392-97.881284-40.543392z" fill="#75B9EB" p-id="1458"></path><path d="M551.602973 511.016603c-10.715039 0-21.430078-4.090155-29.609365-12.269442-16.358573-16.358573-16.358573-42.874483 0-59.219753L672.577209 288.943808h-42.833551c-23.12058 0-41.878806-18.744923-41.878806-41.878806s18.758226-41.878806 41.878806-41.878806h143.958716c16.931624 0 32.200376 10.210549 38.689161 25.847691 6.488785 15.650445 2.889817 33.67189-9.078773 45.641503L581.212338 498.747161c-8.179286 8.179286-18.894326 12.269441-29.609365 12.269442z" fill="#75B9EB" p-id="1459"></path><path d="M773.703397 288.943808h-143.958716c-23.12058 0-41.878806-18.744923-41.878806-41.878806s18.758226-41.878806 41.878806-41.878806h143.958716c23.12058 0 41.878806 18.744923 41.878806 41.878806s-18.758226 41.878806-41.878806 41.878806z" fill="#75B9EB" p-id="1460"></path><path d="M779.864724 439.050548c-23.12058 0-41.878806-18.744923-41.878806-41.878806V253.226329c0-23.133883 18.758226-41.878806 41.878806-41.878807s41.878806 18.744923 41.878806 41.878807v143.945413c0 23.133883-18.758226 41.878806-41.878806 41.878806z" fill="#75B9EB" p-id="1461"></path><path d="M779.864724 439.050548c-23.12058 0-41.878806-18.744923-41.878806-41.878806V253.226329c0-23.133883 18.758226-41.878806 41.878806-41.878807s41.878806 18.744923 41.878806 41.878807v143.945413c0 23.133883-18.758226 41.878806-41.878806 41.878806z" fill="#75B9EB" p-id="1462"></path></svg>'
              }else{
                  // 公
                  return '<svg t="1665763013530" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1456" width="128" height="128"><path d="M510.887666 512m-446.708971 0a446.708971 446.708971 0 1 0 893.417942 0 446.708971 446.708971 0 1 0-893.417942 0Z" fill="#FFFFFF" p-id="1457"></path><path d="M510.87948 578.902736c-123.673717 0-224.282113-100.607372-224.282113-224.282113s100.607372-224.282113 224.282113-224.282113 224.282113 100.607372 224.282112 224.282113-100.608396 224.282113-224.282112 224.282113z m0-364.80559c-77.486792 0-140.523477 63.036685-140.523477 140.523477s63.036685 140.523477 140.523477 140.523477 140.523477-63.036685 140.523477-140.523477-63.036685-140.523477-140.523477-140.523477z" fill="#FF3EC9" p-id="1458"></path><path d="M510.87948 896.635217c-23.12058 0-41.878806-18.744923-41.878806-41.878806V537.02393c0-23.133883 18.758226-41.878806 41.878806-41.878806s41.878806 18.744923 41.878806 41.878806v317.732481c0 23.133883-18.758226 41.878806-41.878806 41.878806z" fill="#FF3EC9" p-id="1459"></path><path d="M669.752884 737.762837H352.033705c-23.12058 0-41.878806-18.744923-41.878806-41.878806s18.758226-41.878806 41.878806-41.878807h317.719179c23.12058 0 41.878806 18.744923 41.878806 41.878807s-18.758226 41.878806-41.878806 41.878806z" fill="#FF3EC9" p-id="1460"></path></svg>'
              }
          }
        },
        watch:{
          item(newV){
              this.animal={
                  ...newV
              }
          }
        },
        mounted() {
            this.testAnimal()
        }

    }
</script>

<style scoped lang="less">
    .animal-card-box{
        max-width: 250px;
        min-width: 200px;
        min-height: 400px;
        background-color: #98A6B3;
        padding: 20px;
        border-radius: 5px;
        .animal-card-head{
            flex: 2;
            .animal-card-head-img{
                width: 80%;
                height: 80%;
                border-radius: 5px;
                overflow: hidden;
            }
        }
        .animal-card-body{
            flex: 1;
            .animal-card-body-container{

                div{
                    width: 100%;
                    flex: 1;
                    display: flex;
                    font-size: 14px;
                    flex-direction: row;
                    justify-content: flex-start;
                    align-items: center;
                    margin: 5px 0 5px 0;
                    span:first-child{
                        text-align: left;

                    }
                    span:nth-child(2){

                        text-align: left;
                        margin-left: 10px;
                    }

                }
            }
        }
    }
</style>